<template>
  <div>
    <div class="page-card m-top top-tabs">
      <el-tabs v-model="activeName" @tab-click="activeChange">
        <el-tab-pane label="成绩分析" name="cjfx"></el-tab-pane>
        <el-tab-pane label="PDF分析" name="pdffx"></el-tab-pane>
        <el-tab-pane label="卷面留痕" name="jmlh"></el-tab-pane>
      </el-tabs>
      <component ref="component" v-if="xmxx.id" :xmxx="xmxx" :is="activeName"></component>

    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="450px  " :before-close="handleClose">
      <div style="padding:0 20px">
        <div style="display: flex;line-height: 30px;">
          <div>分析内容：</div>
          <el-checkbox-group v-model="checkedAnalysis">

            <el-checkbox label="上线分析">上线分析</el-checkbox>
            <el-checkbox label="成绩分析">成绩赋分</el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="display: flex;margin-top: 20px;line-height: 30px;">
          <div>生成形式：</div>
          <el-checkbox-group v-model="checkedGenerate">

            <el-checkbox label="成绩分析">成绩分析</el-checkbox>
            <el-checkbox label="PDF分析">PDF分析</el-checkbox>
            <el-checkbox label="卷面留痕">卷面留痕</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="generateType == 0" type="primary" @click="dialogVisible = false">生成</el-button>
        <el-button v-if="generateType == 1" type="danger" @click="dialogVisible = false">重新生成</el-button>
        <el-button type="info" @click="dialogVisible = false">返回</el-button>
      </span>
    </el-dialog>
    <!-- <div class="page-bottom">
      <div class="sel-box">
        <el-button @click="startGenerate" type="primary">全部开始生成</el-button>
        <el-button @click="reGenerate" type="primary">全部重新生成</el-button>
        <el-button type="danger">删除结果</el-button>
      </div>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div> -->
  </div>
</template>

<script>
import { debounce } from 'lodash';
import cjfx from "./cjfx.vue";
import pdffx from "./pdffx.vue";
import jmlh from "./jmlh.vue";


export default {
  components: {
    cjfx,
    pdffx,
    jmlh,
  },

  data() {
    return {
      loading: false,
      xmxx: {},
      activeName: "",

      tableData: [],

      timer: null,

      queryParams: {
        pageNum: 1,
        pageSize: 15,
      },
      total: 0,
      dialogTitle: "",
      dialogVisible: false,
      generateType: 0, // 0 生成 1 重新生成
      checkedAnalysis: [],// 分析内容
      checkedGenerate: [],// 生成形式
      multipleSelection: [],
      multiple: true,

    };
  },
  created() {
    console.log(this.activeName);
    this.activeName = this.activeName ? this.activeName : 'cjfx';
    this.$store.dispatch("getXmxx").then((res) => {
      this.xmxx = res;
    });

    this.getList();
  },

  methods: {
    endTime() {
      if (this.activeName == 'cjfx') {
      this.$refs.component.endTime();
    }
    },
    startTime() {
      this.timer = setInterval(() => {
        // 调用查询进度接口
        // 更新进度，有100%的判断是否全部完成 调用 this.endTime();
      }, 3000);
    },
    getList: debounce(function () {

      // this.activeName = this.active  Name?this.activeName:'cjfx';

      this.loading = true;

      this.endTime();
      // 根据activeName调用接口;

      // this.loading = false;
      // 判断是否有生成中的数据，有过有 调用this.startTime();
    }, 600),
    activeChange() {
      this.tableData = [];
      this.queryParams.pageNum = 1;
      this.getList();
    },

    cxsc(row) {
      // 重新生成后  调用this.startTime()
    },
    handleClose() {
      this.dialogVisible = false;
      this.generateType = 0;
    },
    startGenerate() {
      this.dialogTitle = "全部开始生成";
      this.dialogVisible = true;
      this.generateType = 0;

    },
    reGenerate() {
      this.dialogTitle = "全部重新生成";
      this.dialogVisible = true;
      this.generateType = 1;
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      this.multiple = !selection.length;
    },
  },

  beforeDestroy() {
    console.log(this.timer,'beforeDestroy离开页面');

    
    if (this.activeName == 'cjfx') {
      this.$refs.component.endTime();
    }
  },
};
</script>

<style></style>